<template>
  <view class="third-category-container">
    <!-- 筛选栏 -->
    <view class="filter-bar">
      <view
        class="filter-item"
        v-for="(item, index) in filterList"
        :key="index"
        :class="{ active: currentFilter === item.value }"
        @click="handleFilterChange(item.value)"
      >
        <text>{{ item.label }}</text>
      </view>
    </view>

    <!-- 商品列表 -->
    <view class="product-grid">
      <view
        class="product-item"
        v-for="(item, index) in productList"
        :key="index"
        @click="navigateToDetail(item.id)"
      >
        <image :src="item.image" mode="aspectFill" class="product-image"></image>
        <view class="product-info">
          <text class="product-title">{{ item.title }}</text>
          <view class="product-meta">
            <text class="product-price">¥{{ item.price }}</text>
            <text class="product-sales">已售 {{ item.sales }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 加载更多 -->
    <u-loadmore
      :status="loadMoreStatus"
      @loadmore="loadMore"
    ></u-loadmore>
  </view>
</template>

<script>
export default {
  data() {
    return {
      categoryId: null,
      categoryName: '',
      filterList: [
        { label: '综合', value: 'comprehensive' },
        { label: '销量', value: 'sales' },
        { label: '价格', value: 'price' },
        { label: '新品', value: 'latest' }
      ],
      currentFilter: 'comprehensive',
      productList: [],
      page: 1,
      limit: 10,
      hasMore: true,
      loadMoreStatus: 'loadmore' // loadmore, loading, nomore
    }
  },
  onLoad(options) {
    if (options.id) {
      this.categoryId = options.id
      this.loadCategoryInfo()
      this.loadProducts()
    } else {
      uni.showToast({
        title: '缺少分类ID',
        icon: 'error'
      })
      uni.navigateBack()
    }
  },
  onReachBottom() {
    if (this.hasMore && this.loadMoreStatus !== 'loading') {
      this.loadMore()
    }
  },
  methods: {
    async loadCategoryInfo() {
      try {
        // TODO: Add API call to fetch category details if needed
        // For now, just setting the title
        const category = await this.$api.get(`/categories/${this.categoryId}`)
        this.categoryName = category.data.name
        uni.setNavigationBarTitle({ title: this.categoryName })
      } catch (error) {
        console.error('加载分类信息失败:', error)
      }
    },
    handleFilterChange(value) {
      if (this.currentFilter === value) return
      this.currentFilter = value
      this.page = 1
      this.productList = []
      this.hasMore = true
      this.loadMoreStatus = 'loadmore'
      this.loadProducts()
    },
    async loadProducts() {
      if (!this.hasMore || this.loadMoreStatus === 'loading') return
      
      this.loadMoreStatus = 'loading'
      
      try {
        const res = await this.$api.get('/products', {
          params: {
            categoryId: this.categoryId,
            sort: this.currentFilter,
            page: this.page,
            limit: this.limit
          }
        })
        
        if (this.page === 1) {
          this.productList = res.data.list
        } else {
          this.productList = [...this.productList, ...res.data.list]
        }
        
        this.hasMore = res.data.list.length === this.limit
        this.loadMoreStatus = this.hasMore ? 'loadmore' : 'nomore'
        this.page++
      } catch (error) {
        console.error('加载商品失败:', error)
        this.loadMoreStatus = 'loadmore'
        uni.showToast({
          title: '加载失败',
          icon: 'error'
        })
      }
    },
    loadMore() {
      this.loadProducts()
    },
    navigateToDetail(id) {
      uni.navigateTo({
        url: `/pages/product/detail/index?id=${id}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.third-category-container { // Adjusted class name
  min-height: 100vh;
  background-color: #f5f5f5;
}

.filter-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  background-color: #ffffff;
  padding: 20rpx;
  margin-bottom: 20rpx;

  .filter-item {
    flex: 1;
    text-align: center;
    font-size: 28rpx;
    color: #666;
    padding: 10rpx 0;
    position: relative;

    &.active {
      color: #ff5500;
      font-weight: bold;

      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 40rpx;
        height: 4rpx;
        background-color: #ff5500;
        border-radius: 2rpx;
      }
    }
  }
}

.product-grid {
  padding: 20rpx;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
}

.product-item {
  background-color: #ffffff;
  border-radius: 12rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

  .product-image {
    width: 100%;
    height: 345rpx;
  }

  .product-info {
    padding: 20rpx;

    .product-title {
      font-size: 28rpx;
      color: #333;
      @include text-ellipsis(2);
      margin-bottom: 10rpx;
    }

    .product-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .product-price {
        font-size: 32rpx;
        color: #ff5500;
        font-weight: bold;
      }

      .product-sales {
        font-size: 24rpx;
        color: #999;
      }
    }
  }
}
</style> 